<template>
  <div class="title1">文章推送</div>
  <div class="search-bar">
    <el-input v-model="searchText" placeholder="请输入文章标题" class="search-text"></el-input>
    <el-button type="primary" @click="searchArticle">搜索</el-button>
  </div>

  <div class="card-container">
    <el-row>
      <el-col v-for="(item, index) in tableData" :key="index" :span="12">
        <el-card shadow="always" class="card">
          <div v-if="item.imageUrl" class="imgs">
            <img :src="item.imageUrl" style="width: 300px; height: 250px">
          </div>
          <div class="title">
            <span @click="goToDetail(item.id)">{{ item.title }}</span>
          </div>
          <div>
            <p>作者名：{{ item.author }}</p>
            <p>点击数：{{ item.hit }}</p>
            <p>评论数：{{ item.commentNum }}</p>
            <p>创建日期：{{ item.created }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getArticlePage, getAllArticleData } from "@/api/article";
import { extractFirstUrl } from '@/utils/ArticleUtil';

export default {
  name: "articleShow",
  data() {
    return {
      tableData: [{
        title: "",
        author: "",
        created: "",
        hit: "",
        commentNum: "",
        imageUrl: null,
      }],
      ArticleDefaultImg: [
        "https://img0.baidu.com/it/u=4132262126,2751706416&fm=253&fmt=auto&app=138&f=JPEG?w=755&h=500",
        "https://img2.baidu.com/it/u=2556067373,1777158494&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img2.baidu.com/it/u=3151843334,303660808&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=3869322874,2576857354&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img2.baidu.com/it/u=2757681600,3899658030&fm=253&fmt=auto&app=138&f=JPEG?w=755&h=500",
        "https://img2.baidu.com/it/u=1647208510,2543057814&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625",
        "https://img1.baidu.com/it/u=254471532,2177963032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
        "https://img2.baidu.com/it/u=2061666124,3594488696&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
        "https://img2.baidu.com/it/u=2138761821,332740951&fm=253&fmt=auto&app=138&f=JPEG?w=753&h=500",
        "https://img1.baidu.com/it/u=1634449494,2039993285&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img2.baidu.com/it/u=1284682790,3193635731&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
      ],
      searchText:''
    };
  },
  methods: {
    goToDetail(articleId) {
      this.$router.push({
        name: 'ArticleDetail',
        params: { id: articleId }
      });
    },
    fetchData(keyword) {
      getArticlePage({
        current: 1,
        size: 10,
        title: keyword
      }).then(res => {
        this.tableData = res.data.data.records;
        for (const item of this.tableData) {
          item.imageUrl = extractFirstUrl(item.content);
          if (item.imageUrl === null) {
            item.imageUrl = this.ArticleDefaultImg[
                Math.round(Math.random() * (this.ArticleDefaultImg.length - 1))
                ];
          }
        }
      });
    },
    searchArticle() {
      this.fetchData(this.searchText);
    }


  },
  mounted() {
    this.fetchData("");
  }
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Knewave&display=swap');
.title {
  font-family: 'Indie Flower', cursive;
  font-size: 3em;
  color: #c2a162;
  text-shadow: 2px 2px #000000;
  letter-spacing: 0.1em;
  line-height: 1em;
  margin-bottom: 0.4em;
  text-align: center;
}
.title1{
  margin-top: 10px;
  letter-spacing: 0.1em;
  margin-bottom: 0.4em;
  font-family: 'Knewave', cursive;
  font-size: 60px;
  color: black;
  text-shadow: 1px 1px gray;
  line-height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-bar {
  margin-bottom: 1em;
  display: flex;
  justify-content: flex-end;
}

.search-text {
  width: 300px;
  margin-right: 1em;
}

.card-container {
  margin: 1%;
}

.card {
  width: 700px;
  height: 300px;
  margin-bottom: 20px;
  margin-right: 20px;
  display: inline-block;
}

.imgs {
  width: 300px;
  height: 300px;
  float: left;
  margin-right: 20px;
}
</style>
